<!-- 资讯 frame -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>资讯</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  background-color:#F8F8F8;
	}

.information {
  padding-top: .20rem;
}

.information_box {
  width: 6.90rem;
  margin: 0 auto;
}

.ifma_item {
  width: 6.90rem;
  height: 2.00rem;
  display: inline-flex;
  align-items: center;
  background-color: #fff;
  margin-bottom: .20rem;
  border-radius: .10rem;
}

.ifma_left {
  position: relative;
  width: 3.31rem;
  height: 1.40rem;
  margin-left: .21rem;
}

.ifma_text {
  width: 3.01rem;
  height: .76rem;
  font-size: .30rem;
  line-height: .38rem;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ifma_l_bottom {
  position: absolute;
  left: 0;
  bottom: 0;
}

.ifma_l_bottom span {
  font-size: .24rem;
  color: #999;
  margin-right: .80rem;
}

.ifma_right {
  flex: auto;
  text-align: right;
  height: 1.40rem;
  margin-left: .30rem;
}

.ifma_img {
  width: 2.81rem;
  height: 1.40rem;
  border-radius: .10rem;
}
.lading{
	display: flex;
	justify-content: center;
	align-content: center;
	font-size: .30rem;
	color: #aaa;
	margin-bottom: .50rem;

}
.no-data{
	display: flex;
	justify-content: center;
	flex-direction: column;
	height:80vh;
	width: 100%;
	align-items: center;
	color: #999;
}

	</style>
</head>
<body>
	<div class="content app" v-cloak>
		<div class="information">
		  <div class="information_box">
		    <div class="ifma_item" v-for="(item,index) in list" :key="index" @click="message_detail(item.id)"  >
		      <div class="ifma_left">
		        <div class="ifma_text">{{item.title}}</div>
		        <div class="ifma_l_bottom">
		          <span v-if="item.comment_count >999">评论 999+</span>
		          <span v-else>评论 {{item.comment_count}}</span>
		          <span>{{item.create_time}}</span>
		        </div>
		      </div>
		      <div class="ifma_right">
		        <image class="ifma_img" :src="item.cover_img + '?imagediv2/1/w/280/h/140'"></image>
		      </div>
		    </div>

		  </div>

			<div v-if="list.length != 0" class="lading">
				<div v-if="lading == 1">上拉加载</div>
				<div v-if="lading == 2">正在加载...</div>
				<div v-if="lading == 3">没有更多数据</div>
			</div>
			<div v-else class="no-data">
				<img src="../image/notice.png" alt="">
				暂无资讯信息!
			</div>
		</div>
	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			page: 1,
	    size: 20,
	    lading: 1,
	    list: [],
	    noData: {
	      img: "../../images/nodata/notice.png",
	      title: "暂无资讯信息",
	      content: ""
	    }
		},
		mounted: function(){
				this.noticeList()
				this.setCustomRefreshHeaderInfo()
				this.vmaddEventListener()
		},
		methods: {
			// 下拉刷新
			setCustomRefreshHeaderInfo: function(){
				api.setCustomRefreshHeaderInfo({
							bgColor: '#eee',
							tips: {
									pull: '下拉刷新',
									threshold: '松开立即刷新',
									load: '正在刷新'
							}
					}, function() {
							vm.noticeList() //获取数据
					});
			},
			// 上拉加载
			vmaddEventListener: function () {
				api.addEventListener({
						name: 'scrolltobottom',
						extra: {
								threshold: 0 //设置距离底部多少距离时触发，默认值为0，数字类型
						}
				}, function(ret, err) {
					vm.noticeListpush()//获取数据  上拉加载
				});
			},
			  //获取资讯列表
			  noticeList: function() {
					this.lading = 2
					this.page = 1
					let param = {
						page: this.page,
					  size: this.size
					}
					AjaxSafe({
				   		url:"/xapp/index/noticeList",
				    	data:param,
				    	loader:true,
						success: function(res) {
						    if (res.state) {
						        vm.list = (res.data.list||[]).map(function(item) {
											item.create_time = item.create_time.substring(0, 10);
											return item;
										});
										if(vm.list.length == res.data.totalRow){
											vm.lading = 3
										}else{
											vm.lading = 1
										}

						    } else {
									vm.lading = 3
						    	api.toast({
										msg: res.msg,
										duration: 2000,
										location: 'middle'
									});
						    }
								 api.refreshHeaderLoadDone()//关闭下拉刷新状态
						},
						failed: function(err){
							 api.refreshHeaderLoadDone()//关闭下拉刷新状态
								alert("网络故障！");
						}
					});
			  },

				//上拉加载获取资讯列表
			  noticeListpush: function() {
					if(this.lading != 1) return

					++this.page
					this.lading = 2
					let param = {
						page: this.page,
					  size: this.size
					}
					AjaxSafe({
				   		url:"/xapp/index/noticeList",
				    	data:param,
				    	loader:true,
						success: function(res) {
						    if (res.state) {
									  var list=(res.data.list||[]).map(function(item) {
											item.create_time = item.create_time.substring(0, 10);
											return item;
										});
						        vm.list.push(...list)
										if(vm.list.length == res.data.totalRow){
											vm.lading = 3
										}else{
											vm.lading = 1
										}
						    } else {
									vm.lading = 3
						    	api.toast({
										msg: res.msg,
										duration: 2000,
										location: 'middle'
									});
						    }
								 api.refreshHeaderLoadDone()//关闭下拉刷新状态
						},
						failed: function(err){
							 api.refreshHeaderLoadDone()//关闭下拉刷新状态
								alert("网络故障！");
						}
					});
			  },


		},

	});
}

</script>
</html>
